<template>
  <div :class="!darkSkin ? 'foot' : 'foot dark'" ref="foot">
    <div class="icon_link">
      <div class="container" ref="container">
        <a href="javascript:void(0)" class="btn btn_qq">
          <i class="iconfont icon-QQ-circle-fill"></i>
        </a>
        <a href="javascript:void(0)" class="btn btn_weixin"
          ><i class="iconfont icon-weixin"></i
        ></a>
        <a href="javascript:void(0)" class="btn btn_gitee"
          ><i class="iconfont icon-gitee2"></i
        ></a>
        <a href="javascript:void(0)" class="btn btn_youjian"
          ><i class="iconfont icon-youjian"></i
        ></a>
      </div>
    </div>
    <div class="info">
      <p>© 2021 - 2022 By Skygray</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Foot",
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
  watch: {
    darkSkin: {
      handler: function (newVal, oldVal) {
        const linkList = Array.from(this.$refs.container.children);
        if (newVal) {
          linkList.forEach((btn) => {
            btn.classList.add("dark");
          });
        } else {
          linkList.forEach((btn) => {
            btn.classList.remove("dark");
          });
        }
      },
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/iconLink.css");
.foot {
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(30, 35, 42, 0.06);
  box-shadow: 0 4px 10px 10px rgb(0 0 0 / 5%);
  background-color: #eee;
  transition: all 0.8s ease;
}
.foot.dark {
  background-color: #232125;
  transition: all 0.8s ease;
}
.icon_link {
  display: flex;
  margin-top: 25px;
  justify-content: center;
  align-items: center;
}
.info {
  display: flex;
  width: 100%;
  height: 14vh;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.info p {
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: #7d7d85;
}
</style>